<?php 
$attractionList = new AttractionList;
$attractionList = $attractionList->get();

$chip = new Chip();
$chip = $chip->get(Session::get('chip_id'));

$visited_pages = unserialize($chip->visited_pages);
if($visited_pages['attracties'] == 0):
	$visited_pages['attracties'] = 1;
	$chip->visited_pages = serialize($visited_pages);
	$chip->save();
?>
	<script>
	$(function() {
		$("#info-form").dialog( "option", "width", 500 );
		$("#info-form").dialog("open");
	});
	</script>
	<div id="info-form" title="Uitleg over attracties">
		<p>Druk op een attractie aan de linkerkant van het scherm om meer informatie over deze attractie te krijgen zoals de wachttijd, de minimum lichaamslengte en de tijdsduur van de attractie. Druk op de knop "geef route" om op de plattegrond de route naar de attractie te krijgen.</p>
	</div>
<? endif; ?>

<!-- Slider nav -->
<script src="<?php echo URL?>js/slidernav/slidernav-min.js" type="text/javascript"></script>
<link rel="stylesheet" href="js/slidernav/slidernav.css" type="text/css" media="screen" />
<style type="text/css">
#slider {
	float:left;
}
.slider-nav,
.slider-content{
	height:615px !important;
}
.slider-nav ul li{
	padding:2px 0 2px;
}
.slider-content .title{
	background-color:#eedbb1;
}
.slider-content .selected .title,
.slider-content .title{
	background-color:#bda579;
	color:#482800;
	border-bottom:1px solid #c4b08d;
}
.slider .slider-nav{
	background-color:#e5cfa6;
	color:#482800;
}
.slider .slider-nav li a{
	color:#482800;
	font-weight:lighter;
}
.slide-down,
.slide-up.end{
	display:none;
}
.slider-nav{
	top:0 !important;
}
.attraction_link{
	background-color:#ecd8b1;
	overflow:hidden;
	border-bottom:1px solid #d9bc96 !important;
	border-top:1px solid #fff1d1;
	text-shadow: 1px 1px 1px rgba(000, 000, 000, 0.3);
	text-decoration:none;
	color:#795500;
	padding:25px 10px 5px !important;
	text-transform:uppercase !important;
}
.attraction_link:hover{
	background-color:#e1ca9f !important;
}
.attraction_link img{
	display:block;
	float:left;
	margin:-20px 15px 0 0;
	overflow:hidden;
	height:60px;
	width:60px;
	border:1px solid #ccc;
}
#attractie_info {
	float:left;
	padding:20px;
}
#attraction_img{
	float:left;
	height:auto;
	display:block;
	overflow:hidden;
	border:1px solid #ccc;
	margin:0 15px 15px 0;	
}
form{
	float:left;
	width:328px;
}
#omschrijving{
	float:left;
	width:100%;
}
#attractie_info pre{
	display:none;
}
h1{
	text-shadow: 1px 1px 1px rgba(000, 000, 000, 0.3);
	color:#795500;
	font-weight:lighter;
	font-size:25px;
	text-transform:uppercase !important;
}
hr{
	border-top:1px solid #ebdbb9;
	border-bottom:1px solid #fceed3;
	border-left:1px solid #fceed3;
	border-right:1px solid #fceed3;
}
form input{
	background: none repeat scroll 0 0 #875A43;
    border: medium none;
    border-radius: 7px 7px 7px 7px;
    color: yellow;
    font-family: Efteling;
    font-size: 1em;
    padding: 11px;
    text-transform: uppercase;
}
</style>
<script type="text/javascript">
    $(document).ready(function(){

    	getJSON(<?php echo $attractionList[0]['id'] ?>);
		
        $('#slider').sliderNav();
        
		$attractie_info = $('#attractie_info');
		
        $('.attraction_link').click( function () {
            attraction_id = $(this).data('attraction-id');
            getJSON(attraction_id);
        	
    		
        });

        function getJSON(attraction_id){
        	$.get("ajax/attraction_info.php", {attraction_id: attraction_id}, function(data){
    			$attractie_info.empty();
				$attractie_info.html(data);	
    	    });
        }
    });
</script>

	<div class="row">
		<div class="twelvecol box red last">
			<div class="outer_wrapper rounded">
				<div class="wrapper">
					<div class="top_nav">
						<button class="twocol" onClick="javascript: history.go(-1)">Terug</button>
						<h2>Attracties</h2>
					</div>
				</div>
			</div>
		</div>
		<div class="twelvecol box last">
		
			<div class="box yellow full-height">
				        <!-- Slidernav -->
				        <div id="slider" class="fourcol last">
						    <div class="slider-content">
						        <ul>
						        <?php 
							        $capital='A';
									for ($i=1; $i<=26; $i++): ?>
										<li id="<?= strtolower($capital) ?>"><a name="<?= strtolower($capital) ?>" class="title"><?= $capital ?></a>
											<ul>
										<?php foreach($attractionList as $attraction):											
											  	if(substr($attraction['name'], 0,1) == $capital): ?>											  	  
													<li><a class="attraction_link" data-attraction-id="<?= $attraction['id'] ?>" onclick="javascript: return false;"><img src="img/attractions/thumb/<?= $attraction['image']?>" alt="<?= $attraction['name'] ?>" /><?= $attraction['name'] ?></a></li>														
										<?php 	endif;
											  endforeach; ?>
										 	</ul>
										 </li>
									<?php $capital++;
									endfor; ?>
								</ul>	
						    </div>
						</div><!-- Slidernav -->
						<div id="attractie_info" class="eightcol last">
						</div>
			</div><!-- box -->
		</div>
	</div>
